<template>
  <div class="lineChart">
    <div id="streamLine" class="echart"></div>
  </div>
</template>

<script>
import echarts from "@/utils/lib/echarts";
import { LineChart } from "echarts/charts";
import { DataZoomComponent, VisualMapComponent } from "echarts/components"; // 平移缩放功能按需引入
echarts.use([LineChart, DataZoomComponent, VisualMapComponent]);
export default {
  name: "lineChat",
  props: {
    // 折线图数据
    lineData: {
      type: Array,
      default: [],
    },
    xData: {
      type: Array,
      default: [],
    },
    mapData: {
      type: Array,
      default: [],
    },
    precision: {
      type: Number,
      default: 2,
    },
    yName: {
      type: String,
      default: "kwh",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.lineCharts(this.lineData, this.xData);
  },
  beforeDestroy() {
    this.chartDes();
  },
  watch: {
    lineData: {
      handler(val) {
        if (val) {
          this.chartDes();
          this.lineCharts(this.lineData, this.xData);
        }
      },
      deep: true,
      immediate: false,
    },
  },
  methods: {
    chartDes() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    lineCharts(lineData, xData) {
      let option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data:
            xData.length > 0
              ? xData
              : [
                  "01:00",
                  "02:00",
                  "03:00",
                  "04:00",
                  "05:00",
                  "06:00",
                  "07:00",
                  "08:00",
                  "09:00",
                  "10:00",
                  "11:00",
                  "12:00",
                  "13:00",
                  "14:00",
                  "15:00",
                  "16:00",
                  "17:00",
                  "18:00",
                  "19:00",
                  "20:00",
                  "21:00",
                  "22:00",
                  "23:00",
                  "24:00",
                ],
          splitNumber: 5,
        },
        dataZoom: {
          type: "slider", // slider  inside
          show: true,
          zoomLock: false, // 如果设置为 true 只能平移，不能缩放
          // xAxisIndex: [0], // 控制哪个X轴 多个X轴的时候生效
          // left: "9%",
          // bottom: -5, // slider生效
          start: 0,
          end: 100, //初始化滚动条
        },
        grid: {
          left: "7%",
          right: "10%",
          bottom: "17%",
          // top: "10%",
          height:"70%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          name: this.yName,
        },
        tooltip: {
          trigger: "axis",
        },
        visualMap: {
          top: 0,
          right: 0,
          precision: this.precision, //设置小数精度，默认0没有小数
          pieces: this.mapData,
          outOfRange: {
            color: "#999",
          },
        },
        series: [
          {
            name: "",
            data: lineData.length > 0 ? lineData : [0],
            showSymbol: false,
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 3,
                },
              },
            },
          },
        ],
      };
      this.initChart("streamLine", option);
    },
    initChart(id, options) {
      this.chart = echarts.init(document.getElementById(id));
      this.chart.setOption(options);
      window.addEventListener("resize", () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.lineChart {
  .echart {
    width: 100%;
    height: 240px;
  }
}
</style>
